<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <!-- <input type="button" value="aa" id="btn"> -->
    <!-- 
        约定的文档习惯
            1、在api文档中被[]包裹的区域为可选区域  fun( [a [, b] [, c] ] )
            2、在ide工具提示中被?描述的区域为可选区域 fun( a , b? , c? )
    -->
    <div id="app">
        <pre v-pre class="note">
        指令的构成 : v-指令名[:指令参数][="指令取值"]
                    指令的:参数只有一个

        v-on指令
            功能：为vue容器中的元素完成 动态 事件绑定
            使用：＜标签 v-on:事件名="事件回调方法()" ＞＜／标签＞
                 ＜标签 v-on:事件名="事件回调方法" ＞＜／标签＞
                 ＜标签 @事件名="事件回调方法()" ＞＜／标签＞
                 ＜标签 @事件名="事件回调方法" ＞＜／标签＞
            参数:事件名
            取值:事件回调方法 - vue的方法仓库
                               行内的执行表达式[vue环境变量的相关赋值改变操作表达式],通过;可以分割多个行内表达式
                               取值Array数组 - 为一个事件同时绑定多个回调函数 - 匿名数组定义时不可以对方法进行()描述
                                              以,方式定义的多个函数回调，效果等同于取值数组规则
                               取值Object对象 - 通过一个指令描述完成多个事件绑定,对象中的属性名为事件绑定,对象中的属性值为回调方法
                                             - 匿名对象定义时不可以对方法进行()描述
        </pre>
        <input type="button" value="控制台输出" v-on:click="printMsg()">
        <br>
        <input type="button" value="控制台输出" v-on:click="printMsg">
        <br>
        <input type="button" value="控制台输出" @click="printMsg()">
        <br>
        <input type="button" value="控制台输出" @click="printMsg">
        <hr>
        <!-- <input type="button" value="控制台输出" @click="console.log('vue的printMsg回调绑定')"> -->
        <p>msg:{{ msg }}</p>
        <input type="button" value="控制台输出" @click=" msg='新msg数据' ">
        <p>
            <input type="button" value="-" @click="subMum()">
            num:{{ num }}
            <input type="button" value="+" @click=" num++ ">
            <input type="button" value="+" @click=" num+=1 ">
            <input type="button" value="+" @click=" num=num+1 ">
        </p>
        <p>flag:{{ flag }}</p>
        <p>info:{{ info }}</p>
        <input type="button" value="修改flag&修改info" @click="setFlagAndInfo()">
        <input type="button" value="修改flag&修改info" @click="flag=!flag;info=Math.random();">
        <hr>
        <input type="button" value="执行多个回调函数" @click=" [funA,funB] ">
        <input type="button" value="执行多个回调函数" @click=" [funB,funA] ">
        <!-- <br>
        <input type="button" value="执行多个回调函数" @click=" [funA(),funB()] "> -->
        <br>
        <input type="button" value="执行多个回调函数" @click=" funC(),funB(),funA() ">
        <br>
        <input type="button" value="执行多个具有固定执行顺序的回调函数" @click=" funD() ">
        <br>
        <input type="text" v-on=" { blur:funA,focus:funB } ">
        <input type="text" @=" { blur:funA,focus:funB } ">
        <!-- <br>
        <input type="text" v-on=" { blur:funA(),focus:funB() } "> -->
        <br>
        <input type="text" @blur="funA()" @focus="funB()">
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"msg变量",
                    num:100,
                    flag:false,
                    info:"info变量"
                }
            },
            methods:{
                printMsg(){
                    console.log("vue的printMsg回调绑定")
                },
                subMum(){
                    // this.num = this.num - 1;
                    // this.num-=1;
                    this.num--;
                },
                setFlagAndInfo(){
                    this.flag = !this.flag;
                    this.info = Math.random();
                },
                funA(){
                    console.log("funA")
                },
                funB(){
                    console.log("funB")
                },
                funC(){
                    console.log("funC")
                },
                funD(){
                    console.log("funD")
                    // 方法仓库中的函数被执行时，可以通过this直接调用方法仓库中的其他方法
                    this.funC();
                    this.funB();
                    this.funA();
                }
            }
        }).mount("#app");
    </script>
</body>
</html>